<template>
      <!-- 开始之后的展示内容 -->
	<view class="display_content">
        <!-- 步骤条 -->
        <view class="_step">
			<uni-steps :options="listStep" active-color="#007AFF" :active="operatingStep-1" direction="column" />
        </view>
        <view class="_operator">
			<view class="_start">
				<button size="mini" v-if="operatingStep==3&&stepResult.three" type="danger" @click="setYao"> 取第{{ yaoStep }}爻结果 </button>
				<button size="mini" v-else type="danger" @click="doIt" :loading="btnLoading"> 开 始 </button>
			</view>
			<!-- 天 -->
			<view>
				<span>{{ tian||'' }}</span>
			</view>
			<text />
			<view>
				<span>{{ di||'' }}</span>
			</view>
        </view>
	</view>
</template>
<script>
export default {
	props:{
		yaoStep:{
			type:Number,
			default:1,
			require:true
		}
	},
	data() {
		return {
			operatingStep: 1, // 步骤条（每爻有三个步骤）
			btnLoading:false,
			t:null,
			// 每一步存储拿出牌的结果
			stepResult: {
				one: 0, two: 0, three: 0
			},
			listStep:[
				{title:'第1次',desc:'暂无'},
				{title:'第2次',desc:'暂无'},
				{title:'第3次',desc:'暂无'}
			],
			restTotal: 49,
			tian: 0,
			di: 0,
			timeout:2000
		}
	},
	methods: {
		doIt() {
			if(this.btnLoading) return
			uni.showToast({
				title: '默念所占之事',
				icon:'error',
				duration: this.timeout
			})
			this.btnLoading=true
			this.t=setTimeout(()=>{
				clearTimeout(this.t)
				this.btnLoading=false
				switch (this.operatingStep) {
				  case 1:
					this.stepResult.one = this.caclNum(49)
						  this.$set(this.listStep,this.operatingStep-1,{title:`第1次`,desc:this.stepResult.one})
					this.operatingStep++
					break
				  case 2:
					this.stepResult.two = this.caclNum(49 - this.stepResult.one)
						  this.$set(this.listStep,this.operatingStep-1,{title:`第2次`,desc:this.stepResult.two})
					this.operatingStep++
					break
				  case 3:
					this.stepResult.three = this.caclNum(49 - this.stepResult.one - this.stepResult.two)
						  this.$set(this.listStep,this.operatingStep-1,{title:`第3次`,desc:this.stepResult.three})
					break
				  default:
					uni.showToast({
						title: '出错了',
						icon:'error',
						duration: 2000
					})
					break
				}
			},2000)
		},
		setYao() {
			this.$emit('setYaoValue',{
				value: [7, 9].indexOf((49 - this.stepResult.one - this.stepResult.two - this.stepResult.three) / 4) != -1, // 阳true，阴false
				isMove: [6, 9].indexOf((49 - this.stepResult.one - this.stepResult.two - this.stepResult.three) / 4) != -1, // 动爻（最新一次 第三步计算结果为6和9的爻）true，否则false
			})
			this.$nextTick(() => {
				this.operatingStep = 1
				this.stepResult = {
				  one: 0, two: 0, three: 0
				}
				this.listStep=[
				  {title:'第1次',desc:'暂无'},
				  {title:'第2次',desc:'暂无'},
				  {title:'第3次',desc:'暂无'}
				]
				this.tian = 0
				this.di = 0
			})
		},
		caclNum(num) {
			// 算出天和地数量(每个数都不能小于2)
			this.tian = this.randomNum(num-2)
			this.di = num - this.tian
			// 算出天中要拿出的数量和地中要拿出的数量
			return (1 + this.getNum(this.tian - 1) + this.getNum(this.di))
		},
		randomNum(num) {
			// 生成一个从2（含）到num（含）的随机数
			return Math.floor(Math.random() * (num - 2 + 1) + 2)
		},
		getNum(num) {
			// 是4的倍数就拿出4张
			return (!(num % 4)) ? 4 : (num % 4)
		}
	}
}
</script>
<style lang='scss'>
.display_content{
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	padding: 10px;
	display: flex;
	._step{
		width: 30%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	._operator{
		position: relative;
		width: 70%;
		height: 100%;
		._start{
			position: absolute;
			top:0;
			left:0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		view{
			height: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20px;
		}
	}
}
</style>
